[docs][performance] Fix excessive use of layers - #4476
Conversation
oliviertassinari
added
performance
scope: docs-infra
commit: |
Bundle size report
Check out the code infra dashboard for more information about this PR. |
✅ Deploy Preview for base-ui ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
atomiks
left a comment
atomiks
left a comment
There was a problem hiding this comment.
Nice ~ I didn't find any regressions when elements need to actually overflow.
cherniavskii
left a comment
cherniavskii
left a comment
There was a problem hiding this comment.
Makes sense to me 👍🏻
I checked the docs on iOS – didn't spot any issues
Bundle size
PerformanceTotal duration: 1,094.00 ms ▼-430.44 ms(-28.2%) | Renders: 50 (+0) | Paint: 1,648.25 ms ▼-633.73 ms(-27.8%)
…and 1 more (+6 within noise) — details Check out the code infra dashboard for more information about this PR. |
There was a problem hiding this comment.
Pull request overview
This PR reduces excessive composited layers in the docs UI by removing unconditional overscroll-behavior-x: contain and applying it only where horizontal scrolling actually occurs, improving scroll performance across docs pages.
Changes:
- Apply
overscroll-behavior-x: containconditionally for scrollable Table/Accordion cells (via[data-scrollable]) to reduce layer promotion. - Remove
overscroll-behavior-x: containfrom the CodeBlock header panel to avoid unnecessary layers / undesirable UX. - Keep horizontal gesture prevention where still needed (e.g., code viewport).
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| docs/src/components/Table.css | Makes overscroll containment conditional for table cells to reduce layer count. |
| docs/src/components/CodeBlock/CodeBlock.css | Removes overscroll containment from the code block header scroll container. |
| docs/src/components/Accordion.css | Makes overscroll containment conditional for accordion scrollable rows to reduce layer count. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
aarongarciah
changed the title
When running this script mui/mui-x#11866 (comment) on the yet to be released Base UI Data Grid, the work the browser does is distributed like this over 1,000ms:
As it turned out, it's a problem with the docs-infra, not the data grid. It reproduces in different places. The issue has been introduced in #866.
Before: https://base-ui.com/react/components/autocomplete#virtualized, try to scroll the list. 566ms in rendering vs. 732ms of total
After: https://deploy-preview-4476--base-ui.netlify.app/react/components/autocomplete#virtualized. 174ms in rendering vs. 495 ms of total. So it's 47% faster.
The gain simply comes from going from 235 layers on the page to 74 layers.
overscroll-behavior-xis forcing the promotion of the element to its own layers.I have removed from the API table where the element was not scrollable, those were not providing value:
I have also removed it from the code demo header, where the UX felt wrong:
We still have too many layers, but it's not as many as before, and the changes in this PR should be non-controversial. After, we can discuss how to bring it a step further.